.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll {
  width: 92%;
  height: 100%;
}

.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.more {
  width: 0.28rem;
  height: 0.28rem;
  align-self: flex-end;
  margin-top: 0.15rem;
}

.title {
  margin-top: 0.68rem;
  font-size: 0.18rem;
  color: #010101;
}

.search-box {
  margin-top: 0.5rem;
  width: 100%;
  height: 0.45rem;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 0.05rem;
  /* border-style: solid; */
  border-color: #010101;
  border-width: 0.8px;
}

.search {
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  height: 0.2rem;
  width: 0.2rem;
}

.input {
  background-color: #F5F5F5;
  font-size: 0.14rem;
  color: #BEBEBE;
}

.hot-title {
  align-self: flex-start;
  font-size: 0.14rem;
  color: #010101;
  margin-top: 0.88rem;
}

.hot-scroll {
  margin-top: 0.25rem;
  width: 100%;
  height: auto;
  scroll-behavior: smooth;
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* 隐藏横向滚动条 */
.hot-scroll::-webkit-scrollbar {
  display: none
}

.novel-item {
  display: flex;
  flex-direction: column;
  width: 48%;
  height: 100%;
  flex: auto 0 0;
  position: relative;
  align-items: center;
}

.image {
  width: 100%;
  height: 2rem;
  border-radius: 0.05rem;
  object-fit: cover;
}

.novel-name {
  margin-top: 0.1rem;
  margin-bottom: 0.05rem;
  font-size: 0.18rem;
  color: #010101;
  width: 80%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.novel-author {
  font-size: 0.12rem;
  color: #BEBEBE;
  width: 80%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sort {
  position: absolute;
  color: #EFEFEF;
  font-size: 0.13rem;
  background-color: var(--error);
  border-top-left-radius: 0.05rem;
  width: 0.4rem;
  height: 0.23rem;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0%;
  left: 0%;
}

/* 弹窗总体样式 */
.popupStyle {
  display: flex;
  width: 100%;
  height: 100%;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  background-color: #FEFEFE;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.top-box {
  width: 100%;
  height: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login {
  border-radius: 100%;
  height: 0.6rem;
  width: 0.6rem;
  font-size: 0.16rem;
  color: #FEFEFE;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #54BCBD;
}



.avatar {
  height: 0.5rem;
  width: 0.5rem;
  object-fit: cover;
  border-radius: 100%;
}

.userinfo {
  display: flex;
  flex-direction: column;
  margin-left: 0.15rem;
}

.nickname {
  font-size: 0.16rem;
  color: #010101;
  margin-bottom: 0.05rem;
}

.userid {
  font-size: 0.13rem;
  color: #6C6C6C;
}

.line {
  height: 0.6px;
  width: 100%;
  background-color: var(--thin-line-color);
}

.item-box {
  width: 100%;
  height: calc(100% - 0.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-top-color: var(--thin-line-color);
  border-top-width: 0.6px;
  border-top-style: solid;
}

.item {
  color: #010101;
  font-size: 0.16rem;
  width: 100%;
  text-align: center;
}

.setting {
  position: absolute;
  right: 3%;
  top: -18%;
  height: 0.35rem;
  width: 0.35rem;
  animation: translate .8s;
}

.close {
  position: absolute;
  left: 3%;
  top: -18%;
  height: 0.35rem;
  width: 0.35rem;
  animation-delay: 300ms;
  animation: rotate 1s;
}

.exit {
  border-radius: 100%;
  height: 0.5rem;
  width: 0.5rem;
  font-size: 0.14rem;
  color: #FEFEFE;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FCCA00;
  position: absolute;
  left: calc(50% - 0.25rem);
  z-index: -100;
  top: -100%;
  animation: translateExit .6s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes translate {
  from {
    right: -20%;
    top: -18%;
  }

  to {
    right: 3%;
    top: -18%;
  }
}

@keyframes translateExit {
  from {
    top: 0%;
  }

  to {
    top: -100%;
  }
}
